import { useState, useImperativeHandle, forwardRef } from 'react';
import { Input } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import './index.less';

const SearchBar = forwardRef((props: any, ref) => {
  const { placeholder, onSearch } = props;
  const [searchText, $searchText] = useState('');

  useImperativeHandle(ref, () => ({
    searchText,
    $searchText,
  }));

  return (
    <div className="process-search-input-wrapper">
      <div className="process-search-input-container">
        <Input
          allowClear
          placeholder={placeholder}
          suffix={
            <InbizIcon
              onClick={onSearch}
              type="icon-ic-search"
              style={{ fontSize: 16, color: '#8a8a8a' }}
            />
          }
          onPressEnter={onSearch}
          onChange={(e) => $searchText(e.target.value)}
          value={searchText}
        />
      </div>
    </div>
  );
});

export default SearchBar;
